<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html >

<html >
<head >
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
 <link rel="stylesheet" href="layui/css/layui.css" />
 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="jq/css/ui.jqgrid-bootstrap.css" />

 <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
 <script type="text/javascript" src="layui/layui.js" ></script>
 <script type="text/javascript" src="js/vue.min.js"></script>
 

<script src="js/bootstrap.min.js" ></script>
<script src="jq/js/jquery.jqGrid.min.js"></script>
<script src="jq/js/i18n/grid.locale-cn.js"></script>
<style>
		.layui-tab{
			margin:0 0;
		}
</style>
</head>
<body>
    
<div id="vue" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">用户列表</li>
    <li>新增用户</li>
  </ul>
  <div class="layui-tab-content" >
    <div class="layui-tab-item layui-show" style="padding:0px 10px;">
    	  <div style="margin-bottom: 10px;">
		    <button @click="show" class="layui-btn layui-btn-primary">原始按钮</button>
		    <button class="layui-btn">默认按钮</button>
		    <button class="layui-btn layui-btn-normal">百搭按钮</button>
		    <button class="layui-btn layui-btn-warm">暖色按钮</button>
		    <button class="layui-btn layui-btn-danger">警告按钮</button>
		    <button class="layui-btn layui-btn-disabled">禁用按钮</button>
		  </div>
    	 <table id="list2"></table> 
    	 <div id="pager2"></div>
    </div>
    <div class="layui-tab-item">内容2</div>
  </div>
  
  
</div> 
   
   <script>
   	
        layui.use(['element', 'layer'], function () {
            var element = layui.element()
            , layer = layui.layer;
            
        });
//      
        $(function(){
        	 pageInit();
        	
        });
        
       function pageInit(){
	//创建jqGrid组件
	jQuery("#list2").jqGrid(
			{
				datatype : "json",//请求数据返回的类型。可选json,xml,txt
				 styleUI: 'Bootstrap',//设置jqgrid的全局样式为bootstrap样式 
				colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],//jqGrid的列显示名字
				colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
				             {name : 'id',index : 'id',width : 55}, 
				             {name : 'invdate',index : 'invdate',width : 90}, 
				             {name : 'name',index : 'name asc, invdate',width : 100}, 
				             {name : 'amount',index : 'amount',width : 80,align : "right"}, 
				             {name : 'tax',index : 'tax',width : 80,align : "right"}, 
				             {name : 'total',index : 'total',width : 80,align : "right"}, 
				             {name : 'note',index : 'note',width : 80,sortable : false} 
				           ],
		        viewrecords: true,
		        height: 400,
		        rowNum: 10,
		        rowList : [10,30,50],
		        rownumbers: true, 
		        rownumWidth: 25, 
		        autowidth:true,
		        multiselect: true,
		        pager:'#pager2'
			}
	);
			
			 var mydata = [ {id : "1",invdate : "2007-10-01",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, {id : "2",invdate : "2007-10-02",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, {id : "3",invdate : "2007-09-01",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"}, {id : "4",invdate : "2007-10-04",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, {id : "5",invdate : "2007-10-05",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, {id : "6",invdate : "2007-09-06",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"}, {id : "7",invdate : "2007-10-04",name : "test",note : "note",amount : "200.00",tax : "10.00",total : "210.00"}, {id : "8",invdate : "2007-10-03",name : "test2",note : "note2",amount : "300.00",tax : "20.00",total : "320.00"}, {id : "9",invdate : "2007-09-01",name : "test3",note : "note3",amount : "400.00",tax : "30.00",total : "430.00"} ];
			jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});
	/*创建jqGrid的操作按钮容器*/
	 for ( var i = 0; i <= mydata.length; i++){
	 	jQuery("#list2").jqGrid('addRowData', i + 1, mydata[i]); 
	 }
	
	}
       
       
function getSelectedRows() {
    var grid = $("#list2");
    var rowKey = grid.getGridParam("selrow");
    if(!rowKey){
    	alert("请选择一条记录");
    	return ;
    }
    
    return grid.getGridParam("selarrrow");
}
       
function getSelectedRow() {
    var grid = $("#list2");
    var rowKey = grid.getGridParam("selrow");
    if(!rowKey){
    	alert("请选择一条记录");
    	return ;
    }
    
    var selectedIDs = grid.getGridParam("selarrrow");
    if(selectedIDs.length > 1){
    	alert("只能选择一条记录");
    	return ;
    }
    
    return selectedIDs[0];
}
    
    var vm = new Vue({
    	el:'#vue',
    	data:{
    		
    	},
    	methods:{
    		show:function(){
    			var id = getSelectedRow();
    			if(id!=null){
    				alert(id);
    			}
    		},
    	}
    });
   </script>
</body>
</html>
